<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="font_2973804_ddtcz4vvlhg/iconfont.css">
    <style>
        header{
            height: 100px;
            background-color: white;
            border-bottom: 1px solid orange;
        }
        header .center{
            height: 100px;
            width: 1535px;
            margin: auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        header .center .left{
            width: 300px;
            height: 60px;
            display: flex;
            justify-content: space-around;

        }
        header .center .left img{
            width: 60px;
            height: 60px;
        }
        header .center .left p{
            font-size: 36px;
        }
        header .center .right{
            width: 230px;
            height: 50px;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }
        header .center .right select{
            border: none;
            height: 40px;
            
        }
        header .center .right span{
            padding-left: 20px;
            border-left: 1px solid #999;
        }

        table {
            width: 50%;
            margin: 100px auto;
            text-align: center;
            border: 1px solid hotpink;
            border-collapse: collapse;
        }
        
        table th {
            /* background: yellow; */
            height: 2.5em;
            margin: 0 auto;
        }
        
        table tr {
            height: 2.5em;
            margin: 0 auto;
            text-align: center;
          
        }
        table tr td button{
            width: 40px;
        }
        table tr td .num{
           
            width: 40px;
        }
        table tr td .jiesuan{
            margin-left: 360px;
            width: 100px;
            height: 45px;
            border: none;
            background-color: orange;
        }
    </style>
</head>
<body>
    <header>
        <div class="center">
        <div class="left">
            <h1><img src="img/logo-mi2.png" alt=""></h1>
            <p>我的购物车</p>
        </div>
        <div class="right">
            <select name="" id="">
                <option value="">个人中心</option>
                <option value="">评价晒单</option>
                <option value="">我的喜欢</option>
                <option value="">小米账户</option>
                <option value="">退出登录</option>
            </select>
            <span>我的订单</span>
        </div>
    </div> 
    </header>

    <table border="1px" >
        <tr>
            <th>全选<input type="checkbox" id="all" ></th>
            <th>商品名称</th>
            <th>数量</th>
            <th>单价</th>
            <th>小计</th>
            <th>操作</th>
        </tr>
        <tr>
            <td>
                <input type="checkbox" class="dx" checked="checked">
            </td>
            <td class="foot">
               Redmi 手表 2 深蓝色
            </td>
            <td >
                <button class="jian">-</button>
                <span class="num">0</span>
                <button class="plus">+</button>
            </td>
            <td>
                单价:<span class="price">60</span>
            </td>
            <td>
                小计:<span class="subtotal">0</span>
            </td>
            <td>
                <input type="button" value="X" id="xs">
            </td>
        </tr>
        
        <tr>
            <td colspan="6">
                一共 <span class="totalnum">0</span> 件商品, 共计花费 <span class="totalprice">0</span>元。
                <button class="jiesuan">结算</button>
            </td>
        </tr>
    </table>

    <footer>

    </footer>
</body>
</html>
<script src="js/jQuery.js"></script>
<script>
    $("footer").load("footer.html");

    $('#all').click(function () {

// 当前复选框的属性

var status = $(this).prop('checked')

// 选中的属性

$('.dx').prop('checked', status)

zj() //调用总价

})

//判断当前的全选按钮是否选中

function check_all() {

//获取class为dx的所有的复选框的个数

var dx = $(".dx").length;

// 获取选中的复选框的个数

var dx1 = $(".dx:checked").length;

if (dx == dx1) {

    $("#all").prop("checked", true);

} else {

    $("#all").prop("checked", false);

}

}

//给按钮绑定点击事件，调用全选按钮的判断条件

$(".dx").click(function () {

check_all();



zj(); // 总价

})

// 选中删除

$('#xs').click(function () {

// 遍历复选框是否选中

$('.dx').each(function (index, item) {

    // 如果复选框属性等于true

    if ($(item).prop('checked') == true) {

        // 当前元素的父元素的父元素删除

        $(this).parent().parent().remove()

    }

})

zj() // 总价

})

// 减

$('.jian').click(function () {

// 获取当前元素的下一个兄弟元素的val值

var num = parseInt($(this).next().val());

num--;

if (num = 1) {

    num = 1;

}


$(this).next().val(num)

zj() // 总价

})


$('.jia').click(function () {

// 获取当前元素的上一个兄弟元素的val值

var num = parseInt($(this).prev().val());

num++;

// 当前元素的上一个兄弟元素的val值为num

$(this).prev().val(num)

zj() // 总价

})

// // 删除

// $('tr>td>a').click(function () {

// // 当前父元素的父元素删除

// $(this).parent().parent().remove();

// zj() // 总价

// })

function zj() {

var zj = 0.00; //商品总价

var sl = 0; //选中商品数量

$('.dx:checked').each(function () {
    var dj = $(this).parent().nextAll().eq(1).text();

    var num = $(this).parent().nextAll().eq(2).children('.num').val()

    zj += num * dj;

    sl += parseInt(num);

})



$(".totalnum").text(sl);


$(".totalprice").text(zj.toFixed(2));


$('.dx').each(function () {


    var dj = $(this).parent().nextAll().eq(1).text();


    var num = $(this).parent().nextAll().eq(2).children('.num').val()

    var totals = num * dj;

    $(this).parent().nextAll().eq(3).text(totals.toFixed(2))

})

}
zj()

//     function getAjax() {
//     $.ajax({
//         url: "./goodsAndShoppingCart/addShoppingCart.php",
//         type: "post",
//         data: {
//     //              vipName    
//     //             goodsId    
//     //             goodsCount 
//         },
//         success: function (data) {
//             console.log(data);
//             if (data.trim() == "success") {
//                 
//                 
//                 alert("添加成功！")
//                

//             } else {
//                 alert("添加失败！")
//             }
//         }
//     });

//     }
// getAjax();




</script>